<template>
    <div class="box">
        <headers :head_title="head_title" />
        <div >
            <div v-for="item in datalist" :key="index" class="box1">
                <img :src="item.imagePic" alt="" class="img">
                <div class="box2">
                    <div class="xiao">
                        <span class="xian">{{ item.doctorName }}</span><span class="er">{{ item.jobTitle }}</span>
                    </div>
                    <div class="zi">问诊时间<span class="sj">2018.10.12<span class="js">10:25</span></span></div>
                    <div class="box3">
                        <span class="jx">
                            <button class="btn">查看问诊记录</button>
                        </span>
                        <span class="zs">
                            <button class="btn1" @click="clinical">去评价</button>
                        </span>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import headers from '@/components/header.vue'
const head_title = ref('历史问诊')
const router = useRouter();
const datalist = ref([]);
const userId = localStorage.getItem('userId');
const sessionId = JSON.parse(localStorage.getItem('sessionId') || '{}')
const getlist = () => {
    axios.get('/health/user/inquiry/verify/v1/findHistoryInquiryRecord', {
        params: {
            page: 1,
            count: 5,
        },
        headers: {
            userId: userId,
            sessionId: sessionId,
            'Content-Type': 'application/x-www-form-urlencoded',
        }
    }).then((res) => {
        console.log(res.data.result);
        datalist.value = res.data.result;
    })

    }

getlist()

const clinical=()=>{
    router.push('/clinical')
}



</script>

<style scoped lang="scss">
.btn {
    width: 95px; // 190px * 0.5 = 95px
    height: 35px; // 70px * 0.5 = 35px
    background: #999;
    border-radius: 5px; // 10px * 0.5 = 5px
    border: none;
    font-size: 13px; // 26px * 0.5 = 13px
    color: #fff;
    background-color: blue;
}

.btn1 {
    width: 65px; // 130px * 0.5 = 65px
    height: 35px; // 70px * 0.5 = 35px
    background: #999;
    border-radius: 5px; // 10px * 0.5 = 5px
    border: none;
    font-size: 13px; // 26px * 0.5 = 13px
    color: #fff;
    background-color: blue;
}

.jx {
    margin-left: 17.5px; // 35px * 0.5 = 17.5px
    margin-top: 30px; // 60px * 0.5 = 30px
}

.zs {
    margin-left: 30px; // 60px * 0.5 = 30px
    margin-top: 30px; // 60px * 0.5 = 30px
}

.box3 {
    display: flex;
}

.box2 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
}

.xiao {
    width: 100%;
    height: 20px; // 40px * 0.5 = 20px


    margin-top: 15px; // 30px * 0.5 = 15px
    margin-left: 17.5px; // 35px * 0.5 = 17.5px
    /* background: pink; */
    display: flex;
}

.zi {
    margin-top: 25px; // 50px * 0.5 = 25px
    margin-left: 17.5px; // 35px * 0.5 = 17.5px
}

.sj {
    margin-left: 7.5px; // 15px * 0.5 = 7.5px
}

.js {
    margin-left: 5px; // 10px * 0.5 = 5px
}

.xian {
    font-size: 15px; // 30px * 0.5 = 15px
    font-weight: 500;
}

.er {
    margin-left: 7.5px; // 15px * 0.5 = 7.5px
    margin-top: 4.5px; // 9px * 0.5 = 4.5px
}

.du {
    width: 27.5%; // 55% * 0.5 = 27.5%
    height: 20px; // 40px * 0.5 = 20px
    background: green;
    margin-left: 85px; // 170px * 0.5 = 85px
    margin-bottom: 75px; // 150px * 0.5 = 75px
}

.box1 {
    width: 100%;
    height: 175px; // 350px * 0.5 = 175px
    border-bottom: 4px solid #eee; // 8px * 0.5 = 4px
    display: flex;
}

.wen {
    font-size: 15px;
    margin-top: 15px; // 22px * 0.5
    margin-left: 130px;
}

.img {
    width: 125px; // 250px * 0.5 = 125px
    height: 150px; // 300px * 0.5 = 150px
    margin-left: 20px; // 40px * 0.5 = 20px
    margin-top: 7.5px; // 15px * 0.5 = 7.5px
}

.dang {
    width: 100%;
    height: 50px; // 100px * 0.5 = 50px
    border-bottom: 5px solid #eee; // 10px * 0.5 = 5px
    display: flex;
}

.image {
    width: 15px; // 30px * 0.5 = 15px
    height: 15px; // 30px * 0.5 = 15px
    margin-top: 17.5px; // 35px * 0.5 = 17.5px
    margin-left: 15px; // 30px * 0.5 = 15px
}

.box {
    width: 100%;
    height: 100%;
}
</style>
